<template>
  <div class="box8">
    <div class="title">
      <p>游客消费统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  let indicatorList = [
    {
      name: '10岁以下',
    },
    {
      name: '11~20',
    },
    {
      name: '21~30',
    },
    {
      name: '31~40',
    },
    {
      name: '40~60',
    },
  ]

  let option = {
    backgroundColor: 'rgb(13,34,73)',
    color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
    tooltip: {
      show: true, // 弹层数据去掉
    },
    // legend: {
    //     data: [
    //         {
    //             name: '告警', icon: 'rect', itemStyle: {
    //                 color: '#ff4d4d', borderWidth: 0 // 设置图例图标的颜色
    //             },
    //         },
    //         {
    //             name: '预警', icon: 'rect', itemStyle: {
    //                 color: '#0290ff', borderWidth: 0 // 设置图例图标的颜色
    //             }
    //         },
    //         {
    //             name: '缺陷', icon: 'rect', itemStyle: {
    //                 color: '#ffe533', borderWidth: 0 // 设置图例图标的颜色
    //             }
    //         },
    //         {
    //             name: '巡检', icon: 'rect', itemStyle: {
    //                 color: '#06f5bc', borderWidth: 0 // 设置图例图标的颜色
    //             }
    //         },
    //     ],
    //     right:20,
    //     top: 60,
    //     show: true,
    //     y: '1',
    //     center: 0,
    //     itemWidth: 12,
    //     itemHeight: 12,
    //     itemGap: 26,
    //     z: 3,
    //     // orient: 'horizontal',
    //     orient:'vertical',
    //     textStyle: {
    //         fontSize: 14,
    //         color: '#edf8ff',
    //     },
    // },
    radar: {
      center: ['50%', '50%'], // 外圆的位置
      radius: '55%',
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 16,
          fontWeight: 400,
          fontFamily: 'PingFangSC-Regular,PingFang SC',
          fontStyle: 'normal',
        },
      },
      // TODO:
      indicator: indicatorList,
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: 'rgba(255,255,255,0)',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#0ac8ff', // 分隔线颜色
          width: 2, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [50, 60, 40, 10, 0],
            name: '告警',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255, 56, 56, 0.14)', // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: 'rgba(255, 56, 56, 0.14)', // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: 'rgba(255, 56, 56, 0.4)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 56, 56, 0.8)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: 'rgba(255, 56, 56, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#ff6565',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#ff6565',
            },
          },
          {
            value: [80, 80, 80, 70, 60],
            name: '预警',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,194,255, 0.14)', // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: 'rgba(0,194,255, 0.14)', // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: 'rgba(0,194,255, 0.4)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,194,255, 0.8)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: 'rgba(0, 194, 255, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00c8ff',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00c8ff',
            },
          },
          {
            value: [50, 40, 70, 50, 60],
            name: '缺陷',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255, 220, 56, 0.14)', // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: 'rgba(255, 220, 56, 0.14)', // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: 'rgba(255, 220, 56, 0.4)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 220, 56, 0.8)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: 'rgba(255, 220, 56, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#cdbd3e',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#cdbd3e',
            },
          },

          {
            value: [0, 0, 10, 30, 70],
            name: '巡检',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(13, 248, 172, 0.14)', // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: 'rgba(13, 248, 172, 0.14)', // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: 'rgba(13, 248, 172, 0.4)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(13, 248, 172, 0.8)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: 'rgba(13, 248, 172, 0.8)',
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00ffb4',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00ffb4',
            },
          },
        ],
      },
    ],
  }
  mycharts.setOption(option)
})
</script>

<style scoped lang="scss">
.box8 {
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;

  .title {
    color: white;
    padding-left: 20px;
  }

  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
